<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../c/aui.css" />
    <style media="screen">

        body {
            background-color: transparent;
            background-color: #161823;
        }
        #sx-header{
          background: none !important;
          margin-bottom: 0.75rem;
        }
        #sx-header .aui-searchbar,.aui-grid{
            background: none;
        }
        #sx-header .aui-title{
          margin: 0.75rem;
          background: #383A43 !important;
          border-radius: 0.1rem;
        }

        .aui-searchbar-input {
            background: none;
            border-radius: 0.1rem;
        }

        .aui-searchbar .aui-iconfont {
            font-size: 0.75rem;
            margin-right: 0.5rem !important
        }

        .aui-searchbar-input input {
            font-size: 0.75rem;
            color: #fff;
        }

        .aui-bar-nav .aui-btn {
            color: #f00;
            font-size: 0.8rem;
            margin-right: 0.5rem;
            margin-left: 0.5rem;
        }

        .aui-searchbar-clear-btn {
            background: none;
            width: 2rem;
            height: auto;
            top: 0;
            right: 0;
            border-radius: 0;
        }

        .aui-searchbar-clear-btn i.aui-iconfont {
            background: #ccc;
            top: 0;
            border-radius: 50%;
            padding: 0.2rem;
            color: #000 !important;
            font-size: 0.6rem;
            font-weight: bold;
            opacity: 0.7;

        }
        #sx-header .aui-bar-nav{

        }
        .xiaoxi-list,
    		.xiaoxi-list ul {
    			background: none;
    			color: #fff;
    			border: 0;
    		}

    		.xiaoxi-list {
    			border-top: 1px solid #222;
    		}

    		.xiaoxi-list .aui-list .aui-list-item {
    			border-bottom: 0;
    			background: none;
    			padding-top: 0.5rem;
    			padding-bottom: 0.5rem;
    		}

    		.xiaoxi-list .aui-list-item-media {
    			width: 3.5rem;
    		}

    		.xiaoxi-list .user {
    			font-size: 0.75rem;
    			color: #fff;
    			opacity: 0.9;
    			margin-bottom: 0.2rem;
    		}


    		.xiaoxi-list .text {
    			font-size: 0.65rem;
    			color: #999;
    			position: relative;
    		}

    		.xiaoxi-list .time{
    			color: #777;
    			font-size: 0.65rem;
    			padding-top: 0.5rem;
    		}
    		.sx-btn{
    			position: absolute;
    			top: 1.65rem;
    			right: 0.75rem;
    			border-radius: 0.15rem;
    			padding: 0.35rem 0rem;
    			font-size: 0.65rem;
    			width: 3rem;
    			text-align: center;
    			color:#999;
    			background: #393B44;
    		}
    		.xiaoxi-list .text,.xiaoxi-list .user{
    			margin-right: 4rem;
    		}
    		.sx-btn img{
    			vertical-align: middle;
    		  width: 0.75rem;
    		  margin: 0 auto;
    		  text-align: center;
    		  display: inline-block;
    		  margin-right: 0.05rem;
    		}
    		.gz{
    			background: #FF2C55 !important;
    			color:#fff;
    		}
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="sx-header">
        <div class="aui-title" style="left:0rem; right: 0rem;">
            <div class="aui-searchbar">
                <div class="aui-searchbar-input aui-border-radius">
                    <i class="aui-iconfont aui-icon-search"></i>
                    <form>
                      <input type="search" autoComplete='off' placeholder="搜索昵称 / 号码 / 手机" id="input">
        						</form>
                    <!-- <div class="aui-searchbar-clear-btn aui-show">
                        <i class="aui-iconfont aui-icon-close"></i>
                    </div> -->
                </div>
                <!-- <div class="aui-searchbar-btn" tapmode>取消</div> -->
            </div>
        </div>
        <!-- <div class="aui-pull-right aui-btn">
            取消
        </div> -->
    </header>

    <div class="aui-card-list xiaoxi-list ">
  		<div class="aui-card-list-content">
  			<script id="sx-list" type="text/x-dot-template">
  				{{ for(var i=0,it=it.data; i < it.length; i++) { }}
  				<li class="aui-list-item aui-list-item-middle">
  					<div class="aui-media-list-item-inner">
  						<div class="aui-list-item-media">
  							<img tapmode onclick="_u({{= it[i].id}})" src="{{= it[i].img ? _img(it[i].img,60,60) : '../i/touxiang.png' }}" class="aui-img-round">
  						</div>
  						<div class="aui-list-item-inner">
  							<div class="user aui-ellipsis" tapmode onclick="_u({{= it[i].id}})">
  								{{= it[i].username ? it[i].username : '' }}
  							</div>
  							<div class="aui-ellipsis text" tapmode onclick="_u({{= it[i].id}})">
  								{{= it[i].qianming ? it[i].qianming  : ''}}
  							</div>
  							<div class="time" tapmode onclick="_u({{= it[i].id}})">粉丝：{{= it[i].member_fensi }}</div>
  							{{? it[i].member_guanzhu}}
  							<em class="sx-btn guanzhu" id="guanzhu_{{= it[i].id}}"  tapmode onclick="guanzhu_s({{= it[i].id}})">已关注</em>
  							{{??}}
  							<em class="sx-btn guanzhu gz" id="guanzhu_{{= it[i].id}}" tapmode onclick="guanzhu_s({{= it[i].id}})"><img src="../i/member_user_gz.png" />关注</em>
  							{{?}}
  						</div>
  					</div>
  				</li>
  				{{ } }}
  			</script>
  			<ul class="aui-list aui-media-list" id="sx-view">
  				<div id="loadingdi_huifu"><img src="../i/footer_progress.png" /></div>
  			</ul>
  		</div>
  	</div>

</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var text='',url = 'member/user_rand';
    apiready = function() {
		urls();
if(adName){
	_init_ad();
	ad = api.require(adName);
}

	  _user = _getPrefs('_user');
      banner();
      // 回车搜索
			window.onkeydown = function(e) {
				//_msg(e.keyCode)
				if (e.keyCode == 13) {
          document.activeElement.blur();
					var text= $api.val($api.byId('input'));
          text = text ? text : '';
          banner();
          _list({url:url,data:{text:text}})
					return false;
				}
			}
      uid = api.pageParam['uid'] ? api.pageParam['uid'] : _user.id;
      _list({url:url,data:{text:text}})
      // 监听滚动
      api.addEventListener({
        name : 'scrolltobottom',
        extra : {
          threshold : threshold //设置距离底部多少距离时触发，默认值为0，数字类型
        }
      }, function(ret, err) {
        if (heigutgao == 1) {// heigutgao=1开启执行 0停止执行   防止连续滚动，等加载数据之后在进行滚动。
          pagenum += 1
          _list({url:url,page:pagenum,data:{text:text}});
          banner();
        }
      });
      // setTimeout(function() {
			// 	document.getElementById("input").focus()
			// },300)
    }
    // 关注状态
    function guanzhu_cls(type,uid){
      banner();
      var _this = $('#guanzhu_'+uid);
      if(!type){
        _this.removeClass('gz');
        _this.html('已关注');
      }else{
        _this.addClass('gz');
        _this.html('关注');
      }
    }

    // 关注/取消用户
    var _guanzhu_ajax = false;
    function guanzhu_s(uid) {
      banner();
      if(!uid){
        return _msg('uid不能为空');
      }
      var _this = $('#guanzhu_'+uid);
      if (!_getPrefs('_user')) {
        return _login();
      }
      if (uid == _user.id) {
        return _msg('不能关注自己1');
      }
      if (_guanzhu_ajax) {
        return _msg('操作太快了');
      }
      _guanzhu_ajax = true;
      if (_this.hasClass('gz')) {
        // 取消用户
        _zhen();
        guanzhu_cls('',uid);
      } else {
        // 关注用户
        guanzhu_cls(1,uid);
      }
      _ajax('member/guanzhu', function(ret, err) {
        if (ret) {
          console.log(JSON.stringify(ret));
        } else {
          _alert(JSON.stringify(err))
        }
        _guanzhu_ajax = false;
      }, {
        gz_uid: uid
      })
    }
</script>

</html>
